<!--
 * @Descripttion: 会员等级
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-18 13:55:46
-->
<template>
  <div>
    <top-nav></top-nav>
    <div class="page-main">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="会员等级列表" name="level">
          <div class="space-lg"></div>
          <lb-tips>等级会员支持自动升级，升级判断条件根据成长值核算，等级会员默认终生有效（不可与 PLUS 会员共用）</lb-tips>
          <el-table
            v-loading="loading"
            :data="tableData"
            :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            style="width: 100%"
          >
            <el-table-column prop="top" label="会员等级" width="100">
              <template slot-scope="scope">VIP{{scope.row.top}}</template>
            </el-table-column>
            <el-table-column prop="title" label="等级名称">
              <template slot-scope="scope">{{scope.row.title || '-'}}</template>
            </el-table-column>
            <el-table-column prop="id" label="获得等级条件">
              <template slot-scope="scope">
                <div v-if="scope.row.title">成长值达到{{scope.row.growth}}</div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="classify_name" label="保级规则"></el-table-column>
            <el-table-column prop="classify_name" label="降级规则"></el-table-column>-->
            <el-table-column prop="rights" label="会员权益">
              <template slot-scope="scope">
                <div v-if="scope.row.title">
                  <div v-for="(item,index) in scope.row.rights" :key="index">
                    <div v-if="index<3">{{index+1}}、{{item}}；</div>
                  </div>
                  <div v-if="scope.row.rights.length > 3">......</div>
                  <div v-if="scope.row.rights.length < 1">-</div>
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="会员数">
              <template slot-scope="scope">{{scope.row.title ? scope.row.member_num : '-'}}</template>
            </el-table-column>
            <el-table-column prop="id" label="等级颜色" width="100">
              <template slot-scope="scope">
                <div
                  class="radius-10"
                  style="width:50px;height:30px"
                  :style="{background: scope.row.color}"
                  v-if="scope.row.title"
                ></div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="id" label="自动升级" width="100">
            <template slot-scope="scope">
                <div class="table-operate" v-if="scope.row.top == 1">
                  <lb-button type='danger' size='mini' plain @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)"  v-if="scope.row.title && scope.row.status === 0">{{$t('action.start')}}</lb-button>
                </div>
                <div class="table-operate" v-else>
                  <div v-if="tableData[(scope.row.top * 1)-2].title">
                    <block v-if="scope.row.title">
                      <lb-button type='danger' size='mini' plain @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)" v-if="tableData[(scope.row.top * 1)-2].status === 1 && scope.row.status === 0">{{$t('action.start')}}</lb-button>
                      <block v-if="scope.row.top < 10">
                        <lb-button type='danger' size='mini' plain @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)" v-if="tableData[(scope.row.top * 1)-2].status === 1 && tableData[scope.row.top].status === 0 && scope.row.status === 1">{{$t('action.stop')}}</lb-button>
                      </block>
                      <block v-else>
                        <lb-button type='danger' size='mini' plain @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)" v-if="scope.row.status === 1">{{$t('action.stop')}}</lb-button>
                      </block>
                    </block>
                  </div>
                </div>
            </template>
            </el-table-column>-->
            <el-table-column prop="status" label="操作">
              <template slot-scope="scope">
                <div class="table-operate" v-if="scope.row.top == 1">
                  <lb-button
                    type="primary"
                    size="mini"
                    plain
                    @click="$router.push(`${appPath}/vip/edit?id=${scope.row.id}`)"
                  >{{$t('action.edit')}}</lb-button>
                  <lb-button
                    type="danger"
                    size="mini"
                    plain
                    @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)"
                    v-if="scope.row.title && scope.row.status === 0"
                  >{{$t('action.start')}}</lb-button>
                </div>
                <div class="table-operate" v-else>
                  <div v-if="tableData[(scope.row.top * 1)-2].title">
                    <lb-button
                      type="primary"
                      size="mini"
                      plain
                      @click="$router.push(`${appPath}/vip/edit?id=${scope.row.id}`)"
                    >{{$t('action.edit')}}</lb-button>
                    <block v-if="scope.row.title">
                      <lb-button
                        type="danger"
                        size="mini"
                        plain
                        @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)"
                        v-if="tableData[(scope.row.top * 1)-2].status === 1 && scope.row.status === 0"
                      >{{$t('action.start')}}</lb-button>
                      <block v-if="scope.row.top < 10">
                        <lb-button
                          type="danger"
                          size="mini"
                          plain
                          @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)"
                          v-if="tableData[(scope.row.top * 1)-2].status === 1 && tableData[scope.row.top].status === 0 && scope.row.status === 1"
                        >{{$t('action.stop')}}</lb-button>
                      </block>
                      <block v-else>
                        <lb-button
                          type="danger"
                          size="mini"
                          plain
                          @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)"
                          v-if="scope.row.status === 1"
                        >{{$t('action.stop')}}</lb-button>
                      </block>
                    </block>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="PLUS 会员" name="plus">
          <div class="space-lg"></div>
          <lb-tips>
            <p>PLUS会员目前仅支持一个等级，仅能通过购买/储值获得，PLUS会员通过有效期核算时间，有效期过了会失去特权</p>
            <p>PLUS会员权重级别高于等级会员，默认为最高等级的会员（相当于 11 级），若成为 PLUS 会员，则优先生效 PLUS 会员特权且不与等级会员叠加</p>
          </lb-tips>
          <el-table
            v-loading="loading"
            :data="tableData"
            :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            style="width: 100%"
          >
            <el-table-column prop="top" label="会员等级" width="100">
              <template slot-scope="scope">VIP{{scope.row.top}}</template>
            </el-table-column>
            <el-table-column prop="title" label="等级名称">
              <template slot-scope="scope">{{scope.row.title || '-'}}</template>
            </el-table-column>
            <el-table-column prop="id" label="获得等级条件">
              <template slot-scope="scope">
                <div v-if="scope.row.is_goods==1 || scope.row.stored_switch==1">{{scope.row.is_goods==1?'购买获得':''}}{{scope.row.is_goods==1&&scope.row.stored_switch==1?'，':''}}{{scope.row.stored_switch==1?'储值获得':''}}</div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column prop="rights" label="会员权益">
              <template slot-scope="scope">
                <div v-if="scope.row.title">
                  <div v-for="(item,index) in scope.row.rights" :key="index">
                    <div v-if="index<3">{{index+1}}、{{item}}；</div>
                  </div>
                  <div v-if="scope.row.rights.length > 3">......</div>
                  <div v-if="scope.row.rights.length < 1">-</div>
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="会员数">
              <template slot-scope="scope">{{scope.row.title ? scope.row.member_num : '-'}}</template>
            </el-table-column>
            <el-table-column prop="id" label="等级颜色" width="100">
              <template slot-scope="scope">
                <div
                  class="radius-10"
                  style="width:50px;height:30px"
                  :style="{background: scope.row.color}"
                  v-if="scope.row.title"
                ></div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="操作">
              <template slot-scope="scope">
                  <lb-button
                    type="primary"
                    size="mini"
                    plain
                    @click="$router.push(`${appPath}/vip/edit?id=${scope.row.id}`)"
                  >{{$t('action.edit')}}</lb-button>
                    <lb-button
                      type="danger"
                      size="mini"
                      plain
                      @click="toSetLevelStatus(scope.row.id,scope.row.status,scope.row.top)"
                      v-if="scope.row.title"
                    >{{$t(scope.row.status === 0?'action.start':'action.stop')}}</lb-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="规则设置" name="rule">
          <div class="space-lg"></div>
          <el-form
            @submit.native.prevent
            :model="subForm"
            :rules="subFormRules"
            ref="aForm"
            label-width="140px"
            class="basic-form"
          >
            <!-- <el-form-item label="降级策略" prop="title">

          <el-radio-group v-model="subForm.title">
            <div style="margin-top:13px">
                <el-radio :label="0">暂不降级</el-radio>
            </div>
            <el-radio :label="1">
            获得等级
            <el-select
              v-model="subForm.max_day"
              filterable
              clearable
              placeholder="请选择"
              style="width:150px"
            >
              <el-option
                v-for="item in dayOptions"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
            后，若此期间新增成长值未达到当前等级保值条件，则降一级。
            </el-radio>
          </el-radio-group>
            <div
              class="f-icontext c-caption mt-lg"
              style="line-height:1"
            >核算期间：“用户成为当前等级会员时间”后的XX月内，若中途修改了保级时间核算期，则从修改之日开始计算，且不会清空之前的成长值

</div>
            </el-form-item>-->
            <el-form-item label="规则介绍" prop="explain">
              <div
                class="f-icontext c-caption mt-lg mb-lg"
                style="line-height:1"
              >您可以撰写相关规则介绍，使用户更好的了解会员体系</div>
              <lb-ueditor v-model="subForm.explain" :destroy="true"></lb-ueditor>
            </el-form-item>

            <el-form-item>
              <lb-button @click="submitFormInfo" type="primary">{{$t('action.submit')}}</lb-button>
              <lb-button @click="goBack" v-if="id">{{$t('action.back')}}</lb-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      appPath: '',
      loading: false,
      tableData: [],
      activeName: 'level',
      dayOptions: [
        { label: '1个月', key: 1 },
        { label: '3个月', key: 3 },
        { label: '12个月', key: 12 }
      ],
      subForm: {
        explain: ''
      },
      subFormRules: {
        explain: {
          required: true,
          type: 'string',
          message: '请输入权益简介',
          trigger: 'blur'
        }
      }
    }
  },
  created () {
    let {path} = this.$route
    this.appPath = path.includes('app/') ? '/app' : ''
  },
  activated () {
    this.activeName = 'level'
    this.getTableDataList()
  },
  methods: {
    handleClick (e) {
      // 会员等级列表  PLUS 会员  规则设置
      if (e.label === '规则设置') {
        this.getConfig()
      } else {
        let param = e.label === 'PLUS 会员' ? {type: 1} : {}
        this.getTableDataList(param)
      }
    },
    async getConfig () {
      let { data } = await this.$api.memberConfigInfo()
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    async getTableDataList (param = {}) {
      this.loading = true
      let { code, data } = await this.$api.memberLevelList(param)
      this.loading = false
      if (code !== 200) return
      this.tableData = data
    },
    toSetLevelStatus (id, status, top) {
      let top1 = top - 1
      let levelMsg =
        top === 1 || top === 999
          ? ''
          : status === 1
            ? `停用等级 VIP${top} 后，原 VIP${top} 用户则降为 VIP${top1} ，请谨慎操作。`
            : `启用等级 VIP${top} 后，原 VIP${top1} 的满级用户会发生变动，请谨慎操作`
      this.$confirm(
        this.$t(status === 1 ? 'tips.confirmStop' : 'tips.confirmStart') +
          `${levelMsg}`,
        this.$t('tips.reminder'),
        {
          confirmButtonText: this.$t('action.comfirm'),
          cancelButtonText: this.$t('action.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.memberStatusUpdate(id, status, top)
      })
    },
    async memberStatusUpdate (id, status, top) {
      let { code } = await this.$api.memberStatusUpdate({ id, status })
      if (code !== 200) return
      this.$message.success(this.$t('tips.successOper'))
      let param = top === 999 ? {type: 1} : {}
      this.getTableDataList(param)
    },
    async submitFormInfo () {
      let formArr = ['aForm']
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate((valid) => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        let { subForm } = this
        let { code } = await this.$api.memberConfigUpdate(subForm)
        if (code !== 200) return
        this.$message.success(this.$t('tips.successSub'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-main {
  .el-input,
  .el-input-number,
  .el-select {
    width: 300px;
  }
  .el-textarea {
    width: 600px;
  }
  .edui-default {
    width: 95%;
  }
}
</style>
